<template>
  <div class="toolbar" :style="styleObject">
    <slot>
      <btn-chat class="link im">&nbsp;</btn-chat>
      <router-link class="link search" title="搜索" :to="searchUrl"></router-link>
    </slot>
  </div>
</template>

<script>
//   import btnChat from './btnChat'
  
  export default {
    data(){
      return {
        scrolltop: 0,
        showToolbar: true,
        elements: null
      }
    },
    computed: {
      styleObject: function () {
        return {right: `${this.showToolbar ? 0 : -2.112}rem`}
      }
    },
    props: {
      searchUrl: {
        type: String,
        default: '/search'
      }
    },
    mounted(){
      this.elements = document.getElementsByClassName('container')[0] || document.getElementsByClassName('main')[0];
      this.elements.addEventListener('scroll', this.getScrolltop);
    },
    beforeDestroy() {
      this.elements.removeEventListener('scroll', this.getScrolltop);
    },
    methods: {
      getScrolltop: function () {
        let scrolltop = this.elements.scrollTop;
        //http://blog.csdn.net/yuwq123/article/details/52880943
  
        this.showToolbar = this.scrolltop > scrolltop ? true : false;
        this.scrolltop = scrolltop;
      }
    },
    // components: {btnChat}
  }
</script>

<style lang="less">
  .toolbar{
    position:absolute; bottom:5rem; right:0; z-index:9999; transition:all .3s;
    .link{ display:block; width:2.112rem; height:2.112rem; margin-top:.096rem; background-position:0 0; background-repeat:no-repeat; background-size:100% 100%; }
    .im{ }
    .search{ }
  }
</style>
